<template>
  <div class="pre">
    <el-dropdown>
      <span class="el-dropdown-link">
        添加前置操作
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item :icon="Edit" @click="handleMenu('CustomScript')">自定义脚本</el-dropdown-item>
          <!-- <el-dropdown-item :icon="DocumentAdd" @click="handleMenu('CommonScript')">公共脚本</el-dropdown-item> -->
          <!-- <el-dropdown-item :icon="Timer" @click="handleMenu('WaitTime')">等待时间</el-dropdown-item> -->
          <!-- <el-dropdown-item :icon="Download" @click="handleMenu('import')">从其他接口\用例\目录导入</el-dropdown-item> -->
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-tabs tab-position="left" ref="tabsRef" v-model="activeName">
      <el-tab-pane v-for="(item, index) of preTabsItems" :key="index" :name="index">
        <template #label>
          <span>
            <el-icon class="drag-handle">
              <Operation />
            </el-icon>
            {{ item.title }}
          </span>
          <el-switch v-model="item.status" size="small" class="switch" />
        </template>
        <ContentWrap>
          <CustomScript v-if="item.component == 'CustomScript'" />
          <CommonScript v-if="item.component == 'CommonScript'" />
          <WaitTime v-if="item.component == 'WaitTime'" />
        </ContentWrap>
      </el-tab-pane>
    </el-tabs>
  </div>
  <ImportScript ref="importScriptRef" />
</template>

<script setup lang="ts">
import { ArrowDown, Edit, DocumentAdd, Timer, Download, Operation } from '@element-plus/icons-vue'
import CustomScript from '../components/prepost/CustomScript.vue'
import CommonScript from '../components/prepost/CommonScript.vue'
import WaitTime from '../components/prepost/WaitTime.vue'
import Sortable from "sortablejs"
import ImportScript from '../debug/dialog/prepost/ImportScript.vue'
const preTabsItems = ref([] as any)
const tabsRef = ref()
const activeName = ref(0)
const importScriptRef = ref()
let index = 1
const titleObj = {
  'CustomScript': '自定义脚本',
  'CommonScript': '公共脚本',
  'WaitTime': '等待时间'
}
/** 拖动效果 */
const initSortable = () => {
  if (tabsRef.value && tabsRef.value.$el) {
    const navWrap = tabsRef.value.$el.querySelector('.el-tabs__nav');
    if (navWrap) {
      new Sortable(navWrap, {
        animation: 150,
        handle: '.drag-handle', // 拖拽手柄
        onEnd: ({ newIndex, oldIndex }) => {
          // 更新数据模型
          const movedTab = preTabsItems.value.splice(oldIndex, 1)[0];
          preTabsItems.value.splice(newIndex, 0, movedTab);
          preTabsItems.value = preTabsItems.value.filter(item => item !== null && item !== undefined);
        }
      });
    } else {
      console.error('Nav wrap element not found');
    }
  } else {
    console.error('Collapse reference is not valid');
  }
};
/** 下拉点击，展示对应组件或者弹窗*/
const handleMenu = (type) => {
  ++index
  if (type != 'import') {
    preTabsItems.value.push({
      title: titleObj[type],
      component: type,
      id: index,
      status: true
    })
    activeName.value = preTabsItems.value.length - 1
  } else {
    importScriptRef.value.open()
  }
}
onMounted(() => {
  nextTick(() => {
    initSortable()
  })
})
</script>

<style scoped lang="scss">

.pre {
  padding: 0 5px;
  height: 100%;
  .drag-handle {
    cursor: move;
    margin-right: 10px;
  }

  >.el-dropdown {
    padding: 10px 0;
    width: 150px;
    display: flex;
    justify-content: center;
    color: #1a85ffb8;
    border: 1px solid var(--el-border-color-light);
    background: var(--el-bg-color);
    margin-bottom: 10px;
  }

  :deep(.el-tabs) {
    height: calc(100% - 50px)!important;
    overflow: auto;

    .el-tabs__item {
      display: flex;
      justify-content: space-between;
      padding-left: 10px !important;
      padding-right: 10px !important;
      margin-top: 5px;
      height: 35px;

      .switch {
        margin-left: 20px;
      }

      &.is-active {
        background: #409eff11;
      }
    }
    .el-tabs__content{
      height: 100%;
      .el-card__body{
        height: 100%;
      }
    }
  }
}
</style>
